<template>
  <page-frame>
    <div class="staff-main addTeamMember" style="vertical-align: top">
      <div class="toptitle">
        <div class="left" v-model="title">{{title}}</div>
        <div class="right">
          <div class="btns">
            <el-button  class="lightGreenBtn" @click="isNextStep" v-show="isAdd">下一步</el-button>
            <!--<el-button  class="lightGreenBtn" @click="editMember" v-show="!isAdd">保存修改</el-button>-->
            <el-button @click="back">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="">
        <div class="order-content">
          <div class="container">
            <el-row :gutter="20" >
              <el-col :span="7">
                <div class="input-item">
                  <label>团队名称</label>
                  <el-input
                    width="100"
                    placeholder="请输入团队名称"
                    disabled
                    class="teamDetailInput"
                    v-model="submitData.tmName">
                  </el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="input-item">
                  <label>负责人</label>
                  <el-input
                    width="100"
                    v-model="teamQueryResponseDTO.dutyPerson"
                    placeholder="请选择负责人名称"
                    disabled
                    class="teamDetailInput">
                  </el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="input-item">
                  <label>服务类型</label>
                  <el-select placeholder="服务类型" multiple disabled v-model="teamQueryResponseDTO.type">
                    <el-option
                      v-for="item in serviceTypes"
                      :label="item.typeName"
                      :value="item.typeId">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
            <!--成员管理-->
            <el-row>
              <div>
                <el-row :gutter="20" class="teamDetailTitle" style="margin-top:20px;">
                  <label >成员管理</label>
                  <el-button  class="fRight lightGreenBtn" :disabled="isClick" @click="getEmpByEmpName">新增/修改团队</el-button>
                </el-row>
                <el-table
                  :data="chooseStaff"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="emName"
                    label="员工姓名"
                    width="">
                  </el-table-column>
                  <el-table-column
                    prop="phone"
                    label="手机号"
                    width="">
                  </el-table-column>
                  <el-table-column
                    prop="dept"
                    label="服务类型">
                  </el-table-column>
                  <el-table-column
                    prop="role"
                    label="角色">
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="100">
                    <template scope="scope" >
                      <el-button type="text" size="small" v-if="!scope.row.isRole" @click="delStaff(scope.row.emId,scope.$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-row>
          </div>
        </div>
      </div>
      <!--新增成员弹框-->
      <el-dialog title="新增团队" v-model="addStaff" size="small" :close-on-click-modal="false">
        <el-row >
          <el-col :span="10">
            <div class="label" style="width: 46%;">团队名称</div>
            <el-input
              placeholder="团队名称"
              class="teamDetailInput"
              v-model="submitData.tmName">
            </el-input>
          </el-col>
          <el-col :span="4" style="width: 8%;height: 1px;"></el-col>
          <el-col :span="10" style="width: 46%;">
            <div class="label">服务类型：</div>
            <el-select placeholder="服务类型" multiple v-model="submitData.type">
              <el-option
                v-for="item in serviceTypes"
                :label="item.typeName"
                :value="item.typeId">
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <div class="teamMember">
          <div class="label" style="padding-top: 15px;">团队成员<span style="color:#3fc6d2;margin-left: 5px">(双击成员姓名选中)</span></div>
          <div class="all">
            <div class="input-item">
              <el-input
                placeholder="查询员工姓名"
                class="staffNameInput"
                v-model="staffName.empName">
              </el-input>
            </div>
            <div class="allName">
              <div v-for="(item,index) in allStaff" @dblclick="choose(item,index)" >{{item.emName}} ({{item.dept}})</div>
            </div>
          </div>
          <div class="choose">
            <div class="chooseName">已选择</div>
            <div class="Item">
              <div v-for="(item, index) in chooseStaff">
                {{item.emName}}({{item.dept}})
              </div>
            </div>
          </div>
          <div class="clear" style="clear:both"></div>
        </div>
        <div class="principal">
          <div class="label">负责人<span style="color:#3fc6d2;margin-left: 5px">(必填)</span></div>
          <el-select v-model="submitData.dutyPersonEmpId" placeholder="负责人">
            <el-option
              v-for="item in chooseStaff"
              :label="item.emName"
              :value="item.emId">
            </el-option>
          </el-select>
        </div>
        <div class="input-item item member">
          <el-button class="lightGreenBtn " @click="editMember">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </page-frame>
</template>


<script>
  import teamApi from '../../service/corporation/teamApi';
  import {CONSTANT_TEAM_TYPE_OPTION} from '../../config/constant';
  export default {
    data() {
      return {
        CONSTANT_TEAM_TYPE_OPTION,
        currentTeamId:0,
        title:"新增团队-成员",
        operateBool:true,
        serviceTypes:[],
        isAdd:false,
        addStaff:false,
        isClick:false,
        staffName:{
          empName: ""
        },
        submitData:{
          dutyPersonEmpId: "",
          insertTeamEmpIdList: [],
          tmName: "",
          type:[],
        },
        allStaff:[

        ],
        chooseStaff:[

        ],
        bedList: [
          {
            "bedId": 1,
            "bedNo": "001",
            "blName": "一号楼",
            "flName": "string",
            "lId": 11,
            "memberId":11,
            "memberName": "王楠",
            "rmName": "string"
          },
          {
            "bedId": 2,
            "bedNo": "002",
            "blName": "二号楼",
            "flName": "string",
            "lId": 0,
            "memberId": 0,
            "memberName": "李小龙",
            "rmName": "string"
          }
        ],
        empList: [
          {
            dept: "",
            emId: 0,
            emName: "董静",
            phone: "string",
            role:""
          }
        ],
        teamQueryResponseDTO: {
          "bedNumber": 0,
          "dutyPerson": "",
          "dutyPersonEmId": 0,
          "memberNumber": 0,
          "tmDescription": "",
          "tmId": 0,
          "tmMemberNumber": 0,
          "tmName": ""
        },
        TeamEditTeamAndEmpRequestDTO:{
          formerDutyPersonEmId: 0,
          insertEmpIdList: [
          ],
          insertTeamEmpIdList:[],
          newDutyPersonEmId: 0,
          tmId: 0,
          tmName: ""
        }
      }
    },
    methods: {
      init(){
        let self = this;
        this.getAllTeamServiceType();
        self.currentTeamId = self.$route.params.teamId;
//        self.addStaff = true;
        if(this.$route.params.way == 1){//增加
          this.isAdd = true;
          this.title = "新增团队-成员";
          this.getEmpByEmpName();
        }else if(this.$route.params.way == 2){//修改
          this.isAdd = false;
          this.title = "修改团队-成员";
          this.getTeamByTeam();
        }
      },
      //获得可添加员工信息
      getEmpByEmpName(){
        let self = this;
        self.addStaff=true;
        teamApi.getEmpByEmpName(self.staffName).then(
          function(response){
            self.allStaff =  response.body.data;
            console.debug(self.allStaff);
          },function(){}
        )
      },
      /**
       * 获取所有团队服务类型
       **/
      getAllTeamServiceType() {
        let self = this;
        teamApi.getAllTeamServiceType().then(function(response){
          self.serviceTypes = response.data.data;
        })
      },

      //选择团队队员
      choose(val,index){
        let self = this;
        self.chooseStaff.push(val);
        self.allStaff.splice(index, 1);
      },
      //获取团队所有信息
      getTeamByTeam(){
        let self = this;
        teamApi.getTeamByTeamId(self.currentTeamId).then(function(response){
          self.chooseStaff  =response.body.data.empList;
          self.teamQueryResponseDTO  =response.body.data.teamQueryResponseDTO;
          self.bedList  =response.body.data.bedList;

          self.submitData.dutyPersonEmpId = response.body.data.teamQueryResponseDTO.dutyPersonEmId;
          self.submitData.tmName = response.body.data.teamQueryResponseDTO.tmName;
          self.submitData.type = response.body.data.teamQueryResponseDTO.type;
          for(var i=0;i<self.chooseStaff.length;i++){
            self.submitData.insertTeamEmpIdList[i] =self.chooseStaff[i].emId;
          };
          self.isLeader();
        },function (){})
      },
      //是否是组长
      isLeader(){
        let self = this;
        self.currentDutyPersonEmId = self.teamQueryResponseDTO.dutyPersonEmId;
//        self.teamQueryResponseDTO.dutyPerson =  self.teamQueryResponseDTO.dutyPerson ;
        for(var i=0;i<self.chooseStaff.length;i++){
          (function (j) {
            if(self.chooseStaff[j].emId == self.currentDutyPersonEmId){
              self.chooseStaff[j].role ="负责人";
              self.chooseStaff[j].isRole =true;
            }else {
              self.chooseStaff[j].role ="组员";
              self.chooseStaff[j].isRole = false;
            };
          })(i);
        };
      },
      //删除团队员工
      delStaff(emId,index){
        let self = this;
        self.$confirm('确定从团队中删除该员工及其关联信息', '删除成员', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          teamApi.editTeamDeleteEmp(emId,self.currentTeamId).then(function () {
          self.$message({
            type: 'success',
            message: '删除成功!'
          });
          self.getTeamByTeam();
        },function (){
          self.$message({
            type: 'warning',
            message: '删除失败!'
          });
        });
      }).catch(() => {
          self.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      },
      //返回
      back(){
        this.$router.push({name: 'team',params: { no: 5 }});
      },
      //新增或编辑团队及负责人
      editMember(){
        let self = this;
        if(self.submitData.tmName==''){
          self.$message({
            message: '请填写团队名称',
            type: 'warning'
          });
          return false;
        }
        if(self.submitData.type==''||self.submitData.type==null){
          self.$message({
            message: '请选择服务类型',
            type: 'warning'
          });
          return false;
        }
        if(self.chooseStaff.length==0){
          self.$message({
            message: '请选择团队成员',
            type: 'warning'
          });
          return false;
        }
        if(self.submitData.dutyPersonEmpId==''||self.submitData.dutyPersonEmpId==null){
          self.$message({
            message: '请填写负责人',
            type: 'warning'
          });
          return false;
        }
        self.TeamEditTeamAndEmpRequestDTO.newDutyPersonEmId = self.submitData.dutyPersonEmpId;
        self.TeamEditTeamAndEmpRequestDTO.dutyPersonEmpId =  self.submitData.dutyPersonEmpId;
//        self.teamQueryResponseDTO.dutyPerson =  self.submitData.dutyPersonEmpId;
        self.TeamEditTeamAndEmpRequestDTO.tmId =self.currentTeamId;
        self.TeamEditTeamAndEmpRequestDTO.tmName = self.submitData.tmName;
        self.TeamEditTeamAndEmpRequestDTO.type = self.submitData.type;
        for(var i=0;i<self.chooseStaff.length;i++ ){
          (function (j) {
            self.TeamEditTeamAndEmpRequestDTO.insertEmpIdList[j] = self.chooseStaff[j].emId;
            self.TeamEditTeamAndEmpRequestDTO.insertTeamEmpIdList[j] = self.chooseStaff[j].emId;
            console.debug( self.TeamEditTeamAndEmpRequestDTO.insertEmpIdList[j]);
          })(i);
        };
        if(this.$route.params.way == 1){
          //新增团队
          teamApi.insertTeam(self.TeamEditTeamAndEmpRequestDTO).then(function(respones){
            if(respones.status===200){
              self.$message({
                message: '新增团队成功',
                type: 'success'
              });
              console.debug(respones.body.data.msg);
              self.currentTeamId = respones.body.data.msg;
              self.getTeamByTeam();
              self.isClick = true;
            };
          },function(){});
        }else if(this.$route.params.way == 2){
          //编辑团队
          teamApi.editTeamInfo(self.currentTeamId,self.TeamEditTeamAndEmpRequestDTO).then(function(respones){
            if(respones.status===200){
              self.$message({
                message: '已保存您更新的员工信息',
                type: 'success'
              });
              self.getTeamByTeam();
            }
          },function(){
            self.$message.error('更新的员工信息失败，请重试');
            self.getTeamByTeam();
          });
        };
        this.addStaff = false;
      },
      querySearch(queryString, cb) {
        console.debug(queryString);
        var allStaff = this.allStaff;
        var results = queryString ? allStaff.filter(this.createFilter(queryString)) : allStaff;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (staff) => {
          console.debug(staff.emName);
          console.debug(queryString.toLowerCase());

          return (staff.emName.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      //下一步
      isNextStep(){
        let self = this;
        if(this.$route.params.way==2){//编辑时返回
          self.$router.push({name:"team",params: { no: 5 }});
        }else{//其他
          if(self.submitData.dutyPersonEmpId !== "" && self.submitData.tmName !== ""){
            self.$router.push({name:"addTeamBed",params:{way:this.$route.params.way,teamId:this.currentTeamId}});
          }else{
            self.$message({
              message: '团队名称,团队成员,团队负责人均填写后才能进行下一步',
              type: 'warning'
            });
          }
        };
      },
    },
    watch:{
      staffName:{
        handler(curVal){
          this. getEmpByEmpName(curVal);
        },
        deep:true
      }
    },
    mounted: function () {
      this.init();
    }
  }
</script>
<style>

  .staff-main .all,.choose{
    border:1px solid #d9d9d9;
    width: 43%;
    padding:10px 10px 0px;
    height: 250px;
    margin-bottom: 20px;
  }
  .staff-main .all{
    float: left;
  }
  .staff-main .choose{
    float: right;
  }
  .staff-main .all .allName{
    height: 175px;
    overflow: scroll;
    border:1px solid #ccc;
  }
  .staff-main .choose .Item{
    height: 208px;
    overflow: scroll;
    border:1px solid #ccc;
  }
  .staff-main .choose .chooseName{
    color: #3fc6d2;
    margin-top:10px;
  }
  .staff-main .choose .el-icon-close{
    color:#3fc6d2;
    font-size: 12px;
  }
  .staff-main .all .input-item{
  }
  .staff-main .all .allName div,.choose .Item div{
    padding:5px 0px;
    cursor: pointer;
  }
  .staff-main .all .allName div:hover{
    background-color: rgba(228, 250, 255, 0.8);
  }
  .staff-main .choose .del-staff{
    float: right;
  }
  .teamName{
    margin-bottom: 10px;
  }
  .staff-main .principal,.teamName{
    width: 45% !important;
  }
  .principal label{
    float: left;
  }
  .principal input{

    float: right;
  }

  .staff-main .title{
    font-size: 28px;
    color: #111111;
    margin: 30px 50px 30px 50px;
    font-weight:bolder;
    padding-left: 15px;
    border-left: 5px solid #0cb7c6;
  }
  .staff-main .btns{
    float: right;
  }
  .staff-main .nameItem{

  }
  .staff-main .nameItem div{

  }
  .staff-main .btns{
    float: right;
  }
  .container .input-item{
    /*margin-bottom: 20px;*/
    margin-top: 15px;
  }
  .container input{
    display: inline-block;
  }
  .btns{
    float: right;
  }
  .teamDetailTitle{
    padding-left:10px;
    padding-right:10px;
    margin-top:40px;
    height:50px;
    line-height:50px;
  }
  .teamDetailTitle label{
    /*font-size:20px;*/
  }
  @media screen and (max-width:1367px){
    .teamDetailInput{
      width:70%!important;
    }
  }
  .item.member{
    text-align:center;
  }
  .addTeamMember .el-select-dropdown{
    z-index: 99999!important;
  }
  .el-autocomplete-suggestion{
    z-index: 99999!important;
  }
  .staff-main .el-dialog .input-item{
    padding-left: 0px!important;
  }
  .staff-main .el-dialog .label{
    margin-bottom:5px;
  }
  .staff-main .el-dialog .teamName{
    margin-bottom: 20px;
  }
  .staff-main .el-dialog--tiny{
    /*width: 40%!important;*/
  }
</style>
